// 2.使用PureComponent
import React, {PureComponent} from 'react';
import './index.css'

//在state或props没有更新的时候不重新渲染组件或子组件的两种方法:1.自己重写shouldComponentUpdate 2.使用PureComponent
class Demo extends PureComponent {
    state = {
        userName: '张三',
        choose: ['IT', '研究生', '事业单位']
    }
    add = () => {
        // //由于state和prop用的是浅比较，比较的是地址，所以改变原state和prop是不会引起更新的。例如：
        // const {choose}=this.state
        // choose.unshift('发财')
        // this.setState({choose})
        //正确做法：
        const {choose} = this.state
        this.setState({choose: ['发财',...choose]})
    }
    changeName = () => {
        this.setState({
            userName: '里斯'
        })
        // this.setState({})
        // //由于state和prop用的是浅比较，比较的是地址，所以改变原state和prop是不会引起更新的。例如：
        // const obj=this.state
        // obj.userName='里斯'
        // this.setState(obj)
    }

    // //1.自己重写shouldComponentUpdate
    // shouldComponentUpdate(nextProps, nextState, nextContext) {
    //     console.log(nextProps, nextState)
    //     console.log(this.props, this.state)
    //     return !(this.state.userName === nextState.userName)
    // }

    render() {
        console.log('parent--render')
        const {userName, choose} = this.state
        return (
            <div className={'parent'}>
                我是父组件
                <span>我的用户名是{userName}</span>
                <br/>
                <button onClick={this.changeName}>点击切换姓名</button>
                <Child userName={userName}/>
                {choose + ''} <br/>
                <button onClick={this.add}>添加一个人</button>
            </div>
        );
    }
}

class Child extends PureComponent {
    // //1.自己重写shouldComponentUpdate
    // shouldComponentUpdate(nextProps, nextState, nextContext) {
    //     console.log(nextProps, nextState)
    //     console.log(this.props, this.state)
    //     return !(this.props.userName === nextProps.userName)
    // }
    render() {
        console.log('child--render')
        return <div className={'child'}>
            我是子组件
            <span>我父亲的用户名是{this.props.userName}</span>
        </div>
    }
}

export default Demo;